{{csrf_field()}}
<div class="layui-row">
    <div class="layui-col-md8">
        <div class="layui-form-item">
            <label class="layui-form-label">* 标题</label>
            <div class="layui-input-block">
                <input type="text" lay-verify="required" lay-reqText="请输入标题" id="title" name="title" value="{{$info->title?? old('title')}}" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-block">
                <input type="text" id="post_slug" name="post_slug" value="{{$info->post_slug?? old('post_slug')}}" autocomplete="off" placeholder="" class="layui-input">
                <div class="layui-form-mid layui-word-aux">根据标题自动生成 拼音或者英文单词 用‘-’连接 用于URL中</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详情内容</label>
            <div class="layui-input-block">
                <textarea id="post_content"  name="post_content">{{$info->post_content ?? old('post_content')}}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">跳转链接</label>
            <div class="layui-input-block">
                <input type="text" name="post_jump_url"  value="{{$info->post_jump_url?? old('post_jump_url')}}"  autocomplete="off" placeholder="" class="layui-input">
                <div class="layui-form-mid layui-word-aux">如填写则跳到目标网站 例如：https://juejin.im/</div>
            </div>
        </div>

    </div>
    <div class="layui-col-md4">

        <div class="layui-form-item">
            <label class="layui-form-label">* 所属分类</label>
            <div class="layui-input-block">

                <select lay-verify="required" lay-reqText="请选择分类" name="category_id" xm-select-direction="down" xm-select="select1" xm-select-search-type="dl" xm-select-search>
                    @foreach($categorys as $key =>$val)
                        <option value="{{$val['id']}}" @if(isset($checkArr) && in_array($val['id'],$checkArr)) selected @endif>{{$val['cat_name']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-block">

                <div class="tags" id="tags">
                    <input onkeypress="if(event.keyCode == 13) return false;" type="text"  id="inputTags"  autocomplete="off" placeholder="" class="layui-input">
                    <input type="hidden" name="post_tag" id="post_tag" value="{{$info->post_tag?? old('post_tag')}}">
                </div>
                <div class="layui-form-mid layui-word-aux">输入按回车添加标签</div>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label ">封面</label>
            <div class="layui-input-block">
                <button type="button"  class="layui-btn upload-image">上传图片</button>
                <div class="layui-upload-list">

                    @if(isset($info->logo) && !empty($info->logo))
                        <img class="layui-upload-img" src="{{$info->post_thumb?? ''}}" style="width: 90px" >
                    @else
                        <img class="layui-upload-img" style="width: 90px" >
                    @endif
                    <input type="hidden" name="post_thumb" value="{{$info->post_thumb?? ''}}">
                </div>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">作者：</label>
            <div class="layui-input-block">
                <input type="text" name="post_author"  value="{{$info->post_author ?? old('post_author')}}" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">来源：</label>
            <div class="layui-input-block">
                <input type="text" name="post_source"  value="{{$info->post_source ?? old('post_source')}}" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发布时间：</label>
            <div class="layui-input-block">
                <input type="text" name="post_date"   value="{{$info->post_date ?? old('post_date')}}" autocomplete="off" placeholder="" class="layui-input date">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序：</label>
            <div class="layui-input-block">
                <input type="number" name="post_sort" autocomplete="off" placeholder=""  value="{{$info->post_sort ?? old('post_sort')}}" class="layui-input">
                <div class="layui-form-mid layui-word-aux">数字越小越靠前</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">阅读数量：</label>
            <div class="layui-input-block">
                <input type="number" value="{{$info->post_read_num ?? old('post_read_num')}}" name="post_read_num" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <select name="post_status">
                    <option value="">请选择所属分类</option>
                    <option value="1" selected="selected"> 前端开发</option>
                    <option value="2" > 后端开发</option>
                    <option value="3" > 移动互联</option>
                    <option value="4" > 人工智能</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论开关：</label>
            <div class="layui-input-block">
                <input type="checkbox" value="1" @if(isset($info->comment_status) && $info->comment_status) checked="" @endif name="comment_status" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">访问密码：</label>
            <div class="layui-input-block">
                <input type="text" name="post_password" autocomplete="off" placeholder="" class="layui-input">
                <div class="layui-form-mid layui-word-aux">默认空，无密码可访问</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">自定模板：</label>
            <div class="layui-input-block">
                <select name="post_template">
                    <option value="">自定模板</option>
                    <option value="1" selected="selected"> 前端开发</option>
                    <option value="2" > 后端开发</option>
                    <option value="3" > 移动互联</option>
                    <option value="4" > 人工智能</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="post-submit" lay-submit>保 存</button>
                <button class="layui-btn" lay-filter="*" lay-submit="">预 览</button>
                <button class="layui-btn layui-btn-primary" type="reset">重 置</button>
            </div>
        </div>

    </div>
</div>
<textarea id="edit_image" style="display: none;"></textarea>
@section('script')

<link rel="stylesheet" href="{{ asset('static/admin/css/formSelects-v4.css') }}">
<link rel="stylesheet" href="{{ asset('static/admin/css/inputTags.css') }}">

<script>
    var ue = UE.getEditor("post_content");
    ue.ready(function () {
        //因为Laravel有防csrf防伪造攻击的处理所以加上此行
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
    });

    var ueimage = UE.getEditor("edit_image");
    ueimage.ready(function () {
        //因为Laravel有防csrf防伪造攻击的处理所以加上此行
        ueimage.execCommand('serverparam', '_token', '{{ csrf_token() }}');
    });
</script>

<script>
    layui.use(['layer', 'form','jquery','formSelects','strpy','inputTags','laytpl'], function(){
        var layer = layui.layer,
            form =layui.form,
            laytpl = layui.laytpl,
            inputTags = layui.inputTags,
            formSelects = layui.formSelects,
            $  = layui.jquery;

        var postTag =$('#post_tag').val();
        if(postTag)
        {
            postTag =postTag.split(',');
        }
        else
        {
            postTag =[];
        }

        inputTags.render({
            elem:'#inputTags',//定义输入框input对象
            content: postTag,//默认标签
            aldaBtn: true,//是否开启获取所有数据的按钮
            done: function(value){ //回车后的回调
                console.log(value);
                return false;
            }
        })

        var _editor = UE.getEditor("edit_image",{
            initialFrameWidth:800,
            initialFrameHeight:300,
            zIndex:19891026,
        });
        _editor.ready(function (){
            _editor.hide();
            _editor.addListener('beforeInsertImage',function(t,arg){
                console.log(arg);
                console.log(t);
                var obj = _editor.queryCommandValue("serverparam");
                if(obj.type == "upload-image"){
                    if(arg.length>1){
                        layer.msg("最多只能选择1张图片，请重新选择");
                        return false;
                    }
                    if(arg.length>0) {
                        var uploadImageTd = obj.uploadImageItem.parent().find(".layui-upload-list");
                        console.log(uploadImageTd);
                        uploadImageTd.find('img').attr('src',arg[0].src);
                        uploadImageTd.find('input').val(arg[0].image_id);
                        uploadImageTd.show();
                    }else{
                        layer.msg("请先选择图片");
                        return false;
                    }
                }
                return true;
            });
        });

        $("body").on("click", ".upload-image", function () {

            //此处进行初始化
            var obj = _editor.queryCommandValue("serverparam");
            obj.type = "upload-image";
            obj.uploadImageItem = $(this);
            var uploadImage = _editor.getDialog("insertimage");
            console.log(obj);
            uploadImage.open();
        });

        $("#title, #post_slug").change(function(){
            var strpy= layui.strpy($(this).val(),'-');

            console.log(strpy);
            $('#post_slug').val(strpy.replace(/\ /g, "-"));
        });

        //监听提交
        form.on('submit(post-submit)', function(data){
            var tagName=[];
            $('#tags em').each(function(i){
                tagName.push($(this).text());
            });
            $('#post_tag').val(tagName.join(','));
            //console.log($('.custom_form').serialize());

            //layer.msg(JSON.stringify(data.field));
            //console.log(JSON.stringify(data.field));
           // return false;
        });

        formSelects.on('add_cusome', function(id, vals, val, isAdd, isDisabled){
            $('#key_name').val(val.name);
            console.log(id); //得到美化后的DOM对象
            console.log(vals); //得到美化后的DOM对象
            console.log(val); //得到美化后的DOM对象
        });

        $("body").on("click", ".add_custom", function () {

            //alert($('#key_name').val()+add_custom$('#key_type').val());

            //第三步：渲染模版
            var data = { //数据
                "key_name":$('#key_name').val(),
                "key_type":$('#key_type').val(),
                "key_id":0,
                "key_value":""
            }

            console.log(data);
            tpl(data);

            /*layer.open({
                type: 1,
                zIndex:999999999,
                area:['80%','96%'],
                content: $('#custom-box') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });*/
        });
        $("body").on("click", ".del_custom", function () {
            var self = $(this);

            var data={
                id:self.data('id')
            };
            var url ="{{route('admin.posts.metadel')}}"
            console.log(data)
            if(self.data('id') > 0)

            {
                layer.confirm('确认字段吗？', function(index){


                    $.ajax({
                        'url':"{{route('admin.posts.metadel')}}",
                        'data': {
                            id:self.data('id')
                        },
                        'type': "post",
                        'dataType': "json",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success:function (result) {
                            if (result.code==0){
                                self.parents(".layui-row").remove();
                            }
                            layer.msg(result.msg)


                        },

                    });


                });

            }
            else
            {
                self.parents(".layui-row").remove();
            }
            return false;
            //
        });
        $("body").on("change", ".custome-row input", function () {
            $(this).parents('.custome-row').find('.custom_key_val').attr("name","custom["+$(this).val()+"]");
            console.log($(this).val())
        });
        /*$(".custome-row input").change(function(){
            $(this).parents('.custome-row').find('.custom_key_val').attr("name",$(this).val())
            console.log($(this).val())
        });*/

        function tpl(data) {
            var getTpl = custom_tempalte.innerHTML
                ,view = document.getElementById('view');
            laytpl(getTpl).render(data, function(html){
                $('#custome_html').append(html)
                console.log(html);
                //view.innerHTML = html;
            });
        }

        var meta={!!$meta?? '[]' !!};

        if(!empty(meta))
        {
            $.each(meta,function (i,n) {
                console.log(n);

                tpl({"key_name":n.name,"key_value":n.value,"key_id":n.id});

            })
        }

    });
</script>
@endsection